//
$(function () {
    var myChart1 = echarts.init(document.getElementById('chart_1'));
    var myChart2 = echarts.init(document.getElementById('chart_2'));
    // 基于准备好的dom，初始化echarts实例
    var myChart3 = echarts.init(document.getElementById('chart_3'));
    var chartDom = document.getElementById('chart_4');
    var myChart4 = echarts.init(chartDom);
    // 苍梧县的数据
    // echart_1的数据
    var metaDate1 = [
        [100, 120, 110, 160, 280, 230, 130, 170, 140, 120, 30, 230],//降雨量
        [9, 3, 5, 6, 8, 2, 9, 3, 1, 5, 10, 9] //平均天数
    ]
    // echart_2的数据
    var cwdata = [22, 21, 19, 17]
    var cwsource = [
        ['product', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        ['2020', 9, 15, 19, 25, 27, 28, 34, 30, 25, 22, 11, 7],
        ['2021', 7, 12, 15, 21, 24, 28, 35, 37, 32, 25, 12, 7],
        ['2022', 5, 10, 12, 23, 25, 28, 32, 35, 27, 20, 12, 3]
    ]
    // echart_4的数据
    const cwdata1 = [
        [8.07, 6.95],
        [10.0, 8.04],
        [9.05, 8.81],
        [13.0, 7.58],
        [11.0, 8.33],
        [14.0, 7.66],
        [12.5, 6.82],
        [13.4, 6.81],
        [4.05, 4.96],
        [7.08, 5.82],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [7.0, 4.0],
        [14.0, 8.96],
        [9.15, 7.2],
        [6.03, 7.24],
        [12.0, 8.84],
        [12.0, 6.26],
        [11.5, 7.2],
        [10.0, 6.33],
        [5.02, 5.68],
        [3.03, 4.23]
    ];
    // 藤县的数据
    // echart_1的数据
    var metaDate2 = [
        [100, 120, 110, 160, 280, 230, 130, 170, 140, 120, 280, 230],//降雨量
        [2, 3, 9, 1, 9, 6, 3, 8, 10, 9, 5, 5] //平均天数
    ]
    // echart_2的数据
    var txdata = [26, 18, 29, 7]
    var txsource = [
        ['product', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        ['2020', 7, 12, 15, 21, 22, 28, 12, 20, 32, 6, 12, 8],
        ['2021', 9, 15, 30, 20, 26, 28, 34, 12, 25, 20, 11, 7],
        ['2022', 5, 20, 12, 23, 20, 30, 12, 35, 20, 10, 12, 5]
    ]
    // echart_4的数据
    const txdata1 = [
        [2.02, 4.47],
        [8.07, 6.95],
        [10.0, 6.33],
        [3.03, 4.23],
        [11.0, 8.33],
        [13.4, 6.81],
        [12.2, 7.83],
        [12.5, 6.82],
        [7.0, 4.0],
        [5.02, 5.68],
        [14.0, 7.66],
        [7.08, 5.82],
        [11.5, 7.2],
        [13.0, 7.58],
        [4.05, 4.96],
        [1.05, 3.33],
        [6.03, 7.24],
        [12.0, 8.84],
        [9.05, 8.81],
        [14.0, 8.96],
        [10.0, 8.04],
        [9.15, 7.2],
        [12.0, 6.26],
        [14.0, 7.66]
    ];

    // 蒙山县的数据
    // echart_1的数据
    var metaDate3 = [
        [100, 120, 110, 160, 280, 230, 130, 170, 140, 120, 70, 230],//降雨量
        [1, 9, 8, 3, 5, 10, 2, 9, 3, 6, 9, 5] //平均天数
    ]
    // echart_2的数据
    var msdata = [2, 15, 22, 31]
    var mssource = [
        ['product', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        ['2020', 7, 12, 15, 21, 22, 28, 12, 20, 32, 6, 12, 8],
        ['2021', 9, 15, 30, 23, 20, 30, 12, 35, 20, 20, 11, 7],
        ['2022', 5, 20, 12, 10, 12, 30, 20, 35, 10, 14, 10, 9]
    ]
    // echart_4的数据
    const msdata1 = [
        [12.0, 8.84],
        [10.0, 6.33],
        [14.0, 7.66],
        [9.05, 8.81],
        [5.02, 5.68],
        [11.0, 8.33],
        [8.07, 6.95],
        [10.0, 8.04],
        [4.05, 4.96],
        [3.03, 4.23],
        [11.5, 7.2],
        [7.08, 5.82],
        [13.0, 7.58],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [14.0, 8.96],
        [13.4, 6.81],
        [12.5, 6.82],
        [7.0, 4.0],
        [9.15, 7.2],
        [6.03, 7.24],
        [12.0, 6.26],
        [13.0, 7.58]
    ];

    // 存储输入城市名后的数据
    var newData = [];
    var newDataecharts = [20, 21, 16, 19];
    let newDataecharts1 = [['product', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    ['2020', 9, 15, 19, 25, 27, 28, 34, 30, 25, 22, 11, 7],
    ['2021', 7, 12, 15, 21, 24, 28, 35, 37, 32, 25, 12, 7],
    ['2022', 5, 10, 12, 23, 25, 28, 32, 35, 27, 20, 12, 3]];
    var newDataecharts4 = [];

    echart_1();
    echart_2();
    echart_3();
    echart_4();

    // 梧州1
    const exampleElems = $('.city-name');
    exampleElems.click(function () {
        // 城市名
        let cityName;
        let isValidCity = false;
        while (!isValidCity) {
            cityName = prompt('请输入城市名：');

            switch (cityName) {
                case '苍梧县':
                    newData = metaDate1;
                    newDataecharts = cwdata;
                    newDataecharts4 = cwdata1;
                    newDataecharts1 = cwsource;
                    isValidCity = true;
                    break;
                case '藤县':
                    newData = metaDate2;
                    newDataecharts = txdata;
                    newDataecharts4 = txdata1;
                    newDataecharts1 = txsource;
                    isValidCity = true;
                    break;
                case '蒙山县':
                    newData = metaDate3;
                    newDataecharts = msdata;
                    newDataecharts4 = msdata1;
                    newDataecharts1 = mssource;
                    isValidCity = true;
                    break;
                case null:
                    isValidCity = true;
                    break;
                default:
                    alert('没有该城市的天气记录，请重新输入');
                    break;
            }
        }
        $(this).text(cityName + '天气记录');
        // 改变数据,更新图形
        myChart1.setOption({
            series: [{
                data: newData
            }]
        });
        myChart2.setOption({
            series: [{
                data: newDataecharts
            }]
        })
        myChart4.setOption({
            series: [{
                data: newDataecharts4
            }]
        })
        echart_1();
        echart_2();
        echart_3();
    })
    function echart_1() {
        // 基于准备好的dom，初始化echarts实例
        var xAxisData = ['5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4'];
        var legendData = ['降雨量', '平均天数'];
        var title = "2022年5月~2023年4月";//标题
        var serieData = [];
        var metaDate = [
            [120, 140, 100, 120, 290, 230, 130, 170, 140, 120, 300, 230],//降雨量
            [9, 9, 5, 2, 10, 3, 8, 1, 3, 9, 5, 6] //平均天数
        ]
        for (var v = 0; v < legendData.length; v++) {
            var serie = {
                name: legendData[v],
                type: 'line',
                symbol: "circle",
                symbolSize: 10,
                data: metaDate[v]
            };
            serieData.push(serie);
        }
        var colors = ["#036BC8", "#FFF", "#5EBEFC", "#2EF7F3"];
        var option = {
            // backgroundColor: '#0f375f',
            title: {
                text: title,
                textAlign: 'left',
                textStyle: {
                    color: "#fff",
                    fontSize: "12",
                    fontWeight: "bold"
                }
            },
            legend: {
                show: true,
                left: "center",
                data: legendData,
                y: "5%",
                itemWidth: 18,
                itemHeight: 12,
                textStyle: {
                    color: "#fff",
                    fontSize: 14
                },
            },
            toolbox: {
                orient: 'vertical',
                right: '1%',
                top: '20%',
                iconStyle: {
                    color: '#fff',
                    borderColor: '#fff',
                    borderWidth: 1,
                },
                feature: {
                    saveAsImage: {},
                    magicType: {
                        // show: true,
                        type: ['line', 'bar', 'stack', 'tiled']
                    }
                }
            },
            color: colors,
            grid: {
                left: '2%',
                top: "12%",
                bottom: "5%",
                right: "5%",
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#6173A3'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#9ea7c4',
                        fontSize: 12
                    }
                },
                axisTick: {
                    show: false
                },
                data: xAxisData,
            },],
            yAxis: [{
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#9ea7c4',
                        fontSize: 12
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#6173A3'
                    }
                },
            },],
            series: serieData
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option);

        window.addEventListener("resize", function () {
            myChart1.resize();
        });
    }

    function echart_2() {
        // 基于准备好的dom，初始化echarts实例
        let newDataecharts1 = newDataecharts;
        var giftImageUrl = "";
        myChart2.setOption({
            graphic: {
                elements: [{
                    type: 'image',
                    style: {
                        image: giftImageUrl,
                        width: 30,
                        height: 30
                    },
                    left: '72%',
                    top: 'center'
                }]
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['预警次数'],
                left: '27%'
            },
            grid: {
                left: '1%',
                right: '60%',
                top: '10%',
                bottom: '10%',
                containLabel: true,
            },
            xAxis: {
                type: 'value',
                position: 'top',
                splitLine: { show: false },
                boundaryGap: [0, 0.01],
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#9ea7c4',
                        fontSize: 12
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#6173A3'
                    }
                },
            },
            yAxis: {
                type: 'category',
                data: ['蓝色预警', '黄色预警', '橙色预警', '红色预警'],
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#9ea7c4',
                        fontSize: 12
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#6173A3'
                    }
                },
            },
            series: [
                {
                    name: '',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#1E90FF', '#FFD700', '#FF8C00', '#FF0000',
                                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B'];
                                return colorList[params.dataIndex]
                            },
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    type: 'bar',
                    // 横向柱形图的数据
                    data: newDataecharts
                },
                {
                    type: 'pie',
                    radius: [30, '80%'],
                    center: ['75%', '50%'],
                    roseType: 'radius',
                    color: ['#1E90FF', '#FFD700', '#FF8C00', '#FF0000', '#C1232B', '#B5C334', '#E87C25', '#27727B'],
                    data: [{
                        value: newDataecharts1[0],
                        name: '蓝色预警'
                    }, {
                        value: newDataecharts1[1],
                        name: '黄色预警'
                    }, {
                        value: newDataecharts1[2],
                        name: '橙色预警'
                    }, {
                        value: newDataecharts1[3],
                        name: '红色预警'
                    }],
                    label: {
                        normal: {
                            textStyle: {
                                fontSize: 14
                            },
                            formatter: function (param) {
                                return param.name + ':\n' + Math.round(param.percent) + '%';
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 2
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 30,
                            shadowColor: 'rgba(0, 0, 0, 0.4)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }]
        });
    }

    function echart_3() {


        option = {
            // backgroundColor: "#404A59",
            color: ['#1E90FF', '#FFD700', '#FF8C00', '#FF0000',],

            title: [{
                text: '',
                left: '1%',
                top: '6%',
                textStyle: {
                    color: '#fff'
                }
            }, {
                text: '',
                left: '83%',
                top: '6%',
                textAlign: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            }],
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: newDataecharts1
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            grid: { top: '50%' },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '37%',
                    center: ['50%', '25%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: '{b}: {@2020} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2020',
                        tooltip: '2020'
                    }
                }
            ]
        };
        myChart3.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart3.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        myChart3.setOption(option);

    }
    function echart_4() {
        var option;

        option = {
            color: ['#00FFFF', '#1E90FF', '#FFD700', '#FF8C00', '#FF0000',],
            xAxis: {},
            yAxis: {},
            series: [
                {
                    symbolSize: 12,
                    data: [
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.2],
                        [11.5, 7.2],
                        [3.03, 4.23],
                        [12.2, 7.83],
                        [2.02, 4.47],
                        [1.05, 3.33],
                        [4.05, 4.96],
                        [6.03, 7.24],
                        [12.0, 6.26],
                        [12.0, 8.84],
                        [7.08, 5.82],
                        [5.02, 5.68]
                    ],
                    type: 'scatter'
                }
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                formatter: (params) => {
                    // 获取当前鼠标位置对应的数据
                    const data = params[0].data;
                    // 返回显示的文本内容
                    return `x: ${data[0]}<br>y: ${data[1]}`
                }
            }
        };

        option && myChart4.setOption(option);

    }
});